<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线聊天</title>
    <style>
        *{margin: 0; padding: 0;}/* 清除间距 */        
        .chatpage{ height: 80vh; display: flex;flex-direction: column; padding: 15px; display: none;}
        /* 聊天页面，高80%；弹性 垂直布局 内边距15 */
        .chatbox{flex:1; padding: 15px; background-color: #f0f0f0;}
        /* 聊天展示区域，自适应高，内间距15 背景浅灰色 */
        .msgbox{ height: 100px; display: flex;}
        /*聊天输入区域，高100  弹性布局 */
        .msgbox textarea{flex:1;padding: 15px; font-size: 20px;}
        /* 输入框 ；自适应宽，内容间距15 ，文字20px */
        .msgbox button{ width: 100px;}  /* 发送按钮 宽度100 */
        /* .me{color: dodgerblue; text-align: right;} */

        .logpage{ height: 100vh; display: flex; justify-content: center; align-items: center; }
        .item{clear:both; display: flex;flex-direction: row-reverse;justify-content: flex-end; margin-top: 10px;}
        /* 独占一行 弹性布局 方向反向 对齐结尾 间距10px */
        .item .msg{ max-width: 70%; background-color: #fff; border-radius: 5px; padding: 10px; margin-left: 20px; margin-right: 20px; position: relative;}
         /* 最宽70% 背景白色 圆角5px 内间距10 距离左右边距20px  相对定位 */
        .item .msg::before{ content:""; position: absolute; top:5px; border-width: 5px; border-style: solid; border-color:transparent; border-right-color:#fff; left:-10px; }
        /* 设置三角形：内容空，绝对定位；上边5px；边框 右侧颜色为白色；左边-10px */
        .item.me{flex-direction: row;}
        /* 如果是自己 弹性布局方向正常 */
        .item.me .msg{ background-color: dodgerblue; color: #fff;}
        /* 背景颜色和文字颜色 */
        .item.me .msg::before{ border-color: transparent; border-left-color:dodgerblue; left:initial; right:-10px; }
        /* 修改三角形的颜色与位置 left:initial left值为初始化（覆盖） */       
        .item .uname{ width: 60px; overflow: hidden; white-space: nowrap; text-overflow: clip;}
        /* 用户名 宽60 超出隐藏 */
        .title{ line-height: 38px; background-color: #333; color:#fff; display: flex; justify-content: space-between; padding: 0 15px; }
        .info{text-align: center;color:#777; margin: 10px;}
    </style>
    <script src="http://localhost:5050/socket.io/socket.io.js"></script>
</head>
<body>
    <div class="logpage" id="logpage">
        <input type="text" placeholder="请输入用户名" id="username"> <button onclick="login()">进入聊天</button>
    </div>
    <div class="chatpage" id="chatpage">
        <div class="title">
            <h3>web聊天系统</h3>
            <p><span id="me"></span> | <span onclick="window.location.reload()">退出</span></p>
        </div>
        <div class="chatbox" id="chatbox">
         <p id="online"></p>
        </div>
        <div class="msgbox">
            <textarea name="" id="msgbox" cols="30" rows="10"></textarea>
            <button onclick="sendMsg()">发送</button>
        </div>
    </div>
<!-- 
    1. 引入socket.io        √
    2. 连接socket服务器      √
        a.用户名，b用户id      √
    3. 发送聊天信息           √
    4. 接收聊天信息           √
 -->
 <script>
     this.userid = new Date().getTime();  //用户名,用户id取当前的事件毫秒 this指window全局
    
     this.socket = io.connect("ws://localhost:5050"); // 连接socket服务器
     function login(){
        this.username =  username.value; //设置用户填入的用户名
        logpage.style.display="none";   // 隐藏登录页面
        chatpage.style.display="flex"; // 显示聊天页面
        me.innerHTML = this.username; // 设置当前用户
        // 发送登录信息给服务器
        this.socket.emit("login",{userid:this.userid,username:this.username})
     }
    //  接收登录信息
    this.socket.on("login",obj=>{
        console.log(obj);
        let arr=[];
        for(let k in obj.onlineUsers){
            arr.push(obj.onlineUsers[k]);
        }
        // 把每个一个信息放入数组；obj.onlineUsers 当前在线用户的列表        
        online.innerHTML = "当前在线用户:"+obj.onlineCount+"人,在线用户列表:"+arr.join("、");
        let p = document.createElement("p");
        p.className="info";
        p.innerHTML=obj.user.username+"进入聊天室";
        chatbox.append(p);        
        
    })
    this.socket.on("logout",obj=>{      
        let arr=[];
        for(let k in obj.onlineUsers){
            arr.push(obj.onlineUsers[k]);
        }
        // 把每个一个信息放入数组；obj.onlineUsers 当前在线用户的列表        
        online.innerHTML = "当前在线用户:"+obj.onlineCount+"人,在线用户列表:"+arr.join("、");
        let p = document.createElement("p");
        p.className="info";
        p.innerHTML=obj.user.username+"离开聊天室";
        chatbox.append(p);        
        
    })
    // 发送聊天信息
    function sendMsg(){
        let msg = msgbox.value;
        let obj = {msg,userid:this.userid,username:this.username}
        this.socket.emit("message",obj);  //message事件发送数据
        msgbox.value="";//清空文本框内容
    }
    // 接受信息
    this.socket.on("message",obj=>{
        let div=document.createElement("div");// 创建一个div元素
        if(obj.userid==this.userid){ // 如果id时自己加class
            div.className="item me";
        }else{
            div.className = "item";//设置用户名item；
        }
       
        div.innerHTML= `<div class="msg">${obj.msg}</div><span class="uname">${obj.username}</span>`;
        chatbox.append(div);// 插入到聊天对话框

    })
 </script>

    
</body>
</html>